<template>
  <div>
    <h1>插槽的使用</h1>
    <hr />
    <Panel>
      <!-- 步骤1：传递插槽的内容(html) -->
      <p class="red">鹅鹅鹅，曲项向天歌。</p>
      <p>白毛浮绿水，红掌拨清波</p>
      <template v-slot:one>
        <!-- 如果没有template包裹，会识别为默认插槽 -->
        <h2>我是具名插槽的内容1</h2>
        <p>内容</p>
      </template>
      <template #title="{ row, abc, c }">
        <h4>咏鹅 骆宾王</h4>
        <!-- <p>{{scope}}</p>
        <p>{{scope.row.name}}</p> -->
        <p>{{ row.name + ":" + row.age }}</p>
        <p>{{ abc }}</p>
        <p>{{ c }}</p>
      </template>
      <p>默认插槽的内容</p>
    </Panel>
    <Panel>
      <p>鹅鹅鹅，曲项向天歌。</p>
      <p v-for="(item, index) in 3" :key="index" class="red">{{ msg }}</p>
      <p>鹅鹅鹅，曲项向天歌。</p>
      <p>白毛浮绿水，红掌拨清波</p>
    </Panel>
    <Panel>
      <Panel></Panel>
    </Panel>
  </div>
</template>

<script>
/**
 * 插槽的使用：
 * 插槽的概念和作用：vue的插槽起到渲染html结构(传入指定结构)的作用
 * 目的：让一个组件借助插槽技术->实现组件复用最大化
 *
 * 1.默认插槽(没有名字，只能有一个)
 * 使用步骤一：在子组件标签内部写html结构(可以写入样式和绑定父组件的变量(胡子语法 动态绑定))
 * 使用步骤二：在子组件的template中指定位置写slot标签，slot是vue内置的全局组件，可以在slot组件内写入默认的内容
 *
 * 2.具名插槽(带有名字，能有多个)
 * 使用步骤与默认插槽类似
 * 区别：使用template包裹html结构，否则会识别为默认插槽的内容，template标签写上v-slot=名字
 * 在子组件中用slot组件接收插槽内容时，需要指定name='名字'
 * v-slot=名字可简写为#名字
 *
 * 3.作用域插槽
 * 传递子组件的数据，再给传入的插槽的结构使用
 * 使用步骤：1.在子组件的slot标签上写传递数据的属性 <slot name="名字" :data='子组件的变量'></slot>
 * 2.在父组件的具名插槽的template的起名字的地方接收  <template #名字='data{子组件变量值}'></template>
 */
export default {
  data() {
    return {
      msg: "123123123",
    };
  },
};
</script>

<style scoped>
.red {
  color: red;
}
</style>